@tailwind base;

@tailwind components;

@tailwind utilities;

h1,
h2,
h3 {
  @apply font-headers;
}

.text-decoration-color {
  text-decoration-color: rgb(44, 152, 240);
}

@layer utilities {
  @variants hover {
    .underline-color {
      @apply underline;
      text-decoration-color: rgb(44, 152, 240);
    }
  }
}

.hexagon::before {
  border-bottom-color: red !important;
}

.hexagon::after {
  border-top-color: red !important;
}

.vertical-timeline.vertical-timeline-custom-line::before {
  @apply bg-gray-100;
}

.vertical-timeline
  .vertical-timeline-element
  .vertical-timeline-element-content {
  @apply bg-gray-100;
  @apply text-gray-600;
}

.vertical-timeline
  .vertical-timeline-element
  .vertical-timeline-element-content-arrow {
  /* bg-gray-100 */
  --tw-bg-opacity: 1;
  border-right: 7px solid rgba(243, 244, 246, var(--tw-bg-opacity));
}

.vertical-timeline-element-icon {
  box-shadow: 0 0 0 4px black, inset 0 2px 0 rgba(0, 0, 0, 0.08),
    0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.header-section {
  opacity: 0.8;
  background-color: rgb(32, 41, 53);
}

.config-manager-section {
  opacity: 0.8;
  background-color: rgb(32, 41, 53);
}

.streaming-section {
  opacity: 0.8;
  background-color: rgb(32, 41, 53);
}

.bg-mycolor {
  background-color: rgb(32, 41, 53);
  background-image: url('../images/bkg.jpeg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
